<template>
  <div class="flow-designer">
    <ApprovalProcessDesigner ref="procDesignerRef"   />
  </div>
</template>
<script setup lang="ts">
import { handleTree } from '@/utils/tree'
import * as RoleApi from '@/api/system/role'
import * as DeptApi from '@/api/system/dept'
import * as PostApi from '@/api/system/post'
import * as UserApi from '@/api/system/user'
import * as UserGroupApi from '@/api/bpm/userGroup'
import ApprovalProcessDesigner from '@/components/res/designer/ApprovalProcessDesigner.vue'
import {DsgnProcService} from "@/api/res/approval/DsgnProcService";
import {useApprovalDesignerStore} from "@/store/modules/dsgn/ApprovalDesigner";
import {DsgnVo} from "@/api/res/approval/vo/DsgnServiceVo";

defineOptions({
  name: 'FlowDesigner'
})
const { query } = useRoute() // 路由的查询

const dsgnModelId = ref<String | undefined>(null)
const modelId: string | undefined = query.modelId as string

// if (modelId != undefined) {
//   dsgnModelId.value = modelId
// }

const designerStore = useApprovalDesignerStore()


const formFields = designerStore.designerModel.form.configJson.widgetList

// 定义计算属性
// const formFields = computed(() => {
//   return designerStore.designerModel.form.configJson.widgetList;
// });
// 监听 formFields 的变化

// watch(designerStore.designerModel, (newVal) => {
//   debugger;
//   provide('formFields', newVal.form.configJson.widgetList);
// }, { deep: true });
//
//
// watch(designerStore.designerModel.form, (newVal) => {
//   debugger;
//   provide('formFields', newVal.configJson.widgetList);
// }, { deep: true });


const formType = ref(10)
const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
const deptTreeOptions = ref()
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
provide('formFields', unref(formFields))
provide('formType', formType)
provide('roleList', roleOptions)
provide('postList', postOptions)
provide('userList', userOptions)
provide('deptList', deptOptions)
provide('userGroupList', userGroupOptions)
provide('deptTree', deptTreeOptions)

onMounted( () => {
  // const resId = useDesigner.getResId()
  // if (resId) {
  //   const resModel = await CenterApi.getDsgnById(useDesigner.getResId())
  //   dsgnModelId.value = resModel.modelId
      fillDsgnMounted()
  // }
})



const fillDsgnMounted = async () => {

  // const bpmnModel = await getModel(dsgnModelId.value)
  //
  // if (bpmnModel) {
  //   formType.value = bpmnModel.formType
  //   if (formType.value === 10) {
  //     const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
  //     formFields.value = bpmnForm?.fields
  //   }
  // }

  // 获得角色列表
  roleOptions.value = await RoleApi.getSimpleRoleList()
  // 获得岗位列表
  postOptions.value = await PostApi.getSimplePostList()
  // 获得用户列表
  userOptions.value = await UserApi.getSimpleUserList()
  // 获得部门列表
  deptOptions.value = await DeptApi.getSimpleDeptList()

  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')

  // 用户组列表
  userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()

}


const procDesignerRef = ref()

const processModelHandler:DsgnProcService = {
  getProcessConfig: () => {
    return procDesignerRef.value.dsgnProcessService.getProcessConfig()
  }
}

defineExpose({ processModelHandler })
</script>
<style lang="scss" scoped>
.flow-designer {
  //min-height: calc(100vh - 124px);
}
</style>
